<template>
    <el-tabs v-model="tabsName" class="demo-tabs" @tab-click="">
        <el-tab-pane label="基础" name="base">

            <EditBase></EditBase>
        </el-tab-pane>
        <el-tab-pane label="自定义属性" name="custom">
            <EditCustom></EditCustom>

        </el-tab-pane>

        <el-tab-pane label="附件" name="fujian">
            <EditFujian></EditFujian>

        </el-tab-pane>
    </el-tabs>

    <el-button type="primary" @click="do_edit">保存</el-button>
</template>


<script lang="ts" setup>
import { ref, provide } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElConfigProvider, ElMessageBox } from 'element-plus';
import EditCustom from './Edit/Custom.vue';
import EditBase from './Edit/Base.vue';

import EditFujian from './Edit/Fujian.vue';



const VITE_URL = window.VITE_URL;
const route = useRoute();
const router = useRouter();
const tabsName: any = ref<string>('base')
const category_list: any = ref<Array<object>>()

const info: any = ref<object>({

    id: 3,
    author: "",
    category_id: 0,
    content: "",
    image: "",
    is_recommend: 1,
    out_link: "",
    public_time: "",
    sort_order: 2,
    status: 1,
    subtitle: "",
    custom: "",
    attachment: "",
    title: "",
    uniacid: 8,
    viewtimes: 55,
    updated_at: "",
    // created_at: "2022-01-03 10:42:04",
})
provide('info', info)
const custom: any = ref<Array<object>>([
    // {
    //     key: '品牌',
    //     value: ''
    // }, {
    //     key: '型号',
    //     value: ''
    // }, {
    //     key: '产地',
    //     value: ''
    // }
])

// const attachment: any = ref<Array<object>>([
const attachment: any = ref<UploadUserFile[]>([
    // {
    //     name: '',
    //     url: ''
    // }
])
provide('custom', custom)
provide('attachment', attachment)
provide('category_list', category_list)

const single = function () {

    var url = VITE_URL + '/admin.cms.article/single';

    url += '?id=' + info.value.id;
    axios.get(url).then(function (res: any) {

        info.value = res.data;
        custom.value = res.data.custom ? res.data.custom : custom.value;
        attachment.value = res.data.attachment ? res.data.attachment : attachment.value;
        info.value.status += ''; // 转字符串， 否则不能正常显示
    });
}

const do_edit = () => {

    let url: string = VITE_URL + '/admin.cms.article/edit';
    url += '?id=' + info.value.id;

    console.log(custom.value,attachment.value)
    // info.value.content = ''; // todo : 这里需要使用 wang 编辑器
    let data: any = {
        id: info.value.id,
        title: info.value.title,
        subtitle: info.value.subtitle,
        author: info.value.author,
        // custom: info.value.custom,
        custom: JSON.stringify(custom.value),
        attachment: JSON.stringify(attachment.value),
        category_id: info.value.category_id,
        content: info.value.content,
        out_link: info.value.out_link,
        public_time: info.value.public_time,
        sort_order: info.value.sort_order,
        is_recommend: info.value.is_recommend,
        viewtimes: info.value.viewtimes,
        image: info.value.image,
    };

    console.log(data.content)
    let data_str: string = '';
    for (let p in data) {
        data_str += p + '=' + encodeURIComponent(data[p]) + '&';

    }
    axios.post(url, data_str).then((res: any) => {

        ElMessage({
            message: !res.data.code ? '修改成功' : res.data.message,
            type: !res.data.code ? 'success' : 'error',
            duration: 800,
            onClose: function () {
                if (!res.data.code) {
                    router.push('/main/cms/article')
                }

            }
        });
    });
}


const get_category_list = () => {
    var url = VITE_URL + '/admin.cms.category/index';

    axios.get(url).then((res: any) => {

        category_list.value = res.data;
    });
}

const init = () => {

    info.value.id = route.params.id ? route.params.id : 0;
    get_category_list();
    if (info.value.id) {
        single();
    }

}

init();




</script>